<template>
  <transition name="fade">
    <div
      class="uco-toast"
      v-if="isShow"
    >
      <!-- <span :class="iconStyle"></span> -->
      <span :class="fontStyle">{{ msg }}</span>
    </div>
  </transition>
</template>

<script>
export default {
  data () {
    return {
      isShow: true,
      type: 'success',
      msg: '成功',
      duration: 1
    }
  },
  computed: {
    fontStyle () {
      // return `tfont icon-${this.type} toast-icon`
      return `tfont font-${this.type}`
    }
  },
  mounted () {
    this.isShow = true
    setTimeout(() => {
      this.isShow = false
    }, this.duration * 1000)
  }
}
</script>

<style lang="scss">
.uco-toast {
  width: 100px;
  border-radius: 10px;
  text-align: center;
  background-color: #ebebeb;
  line-height: 1;
  padding: 5px 10px;
  font-size: 14px;
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  .tfont {
    width: 100%;
    height: 100%;
  }
  .font-success {
    color: #69c006;
  }
  .font-warn {
    color: #d38022;
  }
  .font-error {
    color: #dd1111;
  }
}
</style>